<template>
  <div>
    <a-modal
      title="巡河任务详情"
      wrapClassName="detailModal"
      :visible="visible"
      @cancel="handleCancel()"
      :footer="null"
      width="50%"
    >
      <div class="wrap">
        <a-row>
          <!-- <a-col span="12" push="1"> -->
          <a-descriptions title="" bordered :column="2" v-if="detail">
            <a-descriptions-item label="任务名称">
              {{ detail.name }}
            </a-descriptions-item>
            <a-descriptions-item label="完成情况">
              {{ detail.finishFlag ? "已完成" : "未完成" }}
            </a-descriptions-item>
            <a-descriptions-item label="开始日期">
              {{ detail.startTime }}
            </a-descriptions-item>
            <a-descriptions-item label="结束日期">
              {{ detail.endTime }}
            </a-descriptions-item>
            <a-descriptions-item label="巡河次数">
              {{ detail.patrolNumber }}次
            </a-descriptions-item>
            <a-descriptions-item label="提前提醒天数">
              {{ detail.warnDay }}天
            </a-descriptions-item>
            <a-descriptions-item label="任务描述">
              {{ detail.description }}
            </a-descriptions-item>
          </a-descriptions>
          <a-table
            v-if="detail"
            :columns="columns"
            :data-source="detail.list"
            bordered
            class="patrolDondition"
            style="margin-top: 10px"
            row-key="reachInfoId"
            :pagination="false"
          >
            <div slot="title" style="text-align: center">河段明细</div>
          </a-table>
          <!-- </a-col> -->
        </a-row>
      </div>
    </a-modal>
  </div>
</template>

<script>
export default {
  components: {},
  filters: {},
  props: {
    parentNode: {
      type: Object
    },
    detail: {
      type: Object
    }
  },
  data() {
    return {
      visible: false,
      list: {},
      columns: [
        {
          title: "河流名称",
          dataIndex: "riverName",
          align: "left",
          ellipsis: true
        },
        {
          title: "河段名称",
          dataIndex: "reachName",
          align: "left",
          ellipsis: true
        },
        {
          title: "河长",
          dataIndex: "dutyUserName",
          align: "left",
          ellipsis: true
        },
        {
          title: "河段级别",
          dataIndex: "reachLevelName",
          align: "left",
          ellipsis: true
        },
        {
          title: "已完成巡河次数",
          dataIndex: "finishNumber",
          align: "left",
          ellipsis: true
        }
      ]
    };
  },
  computed: {},
  watch: {
    detail: {
      handler(val) {
        if (val) {
          this.list = val;
        }
      },
      deep: true
    }
  },
  created() {},
  mounted() {},
  methods: {
    handleOk() {
      this.visible = false;
    },
    handleCancel() {
      this.visible = false;
    }
  }
};
</script>

<style lang="scss" scoped>
::v-deep {
  .ant-descriptions-item-label.ant-descriptions-item-colon {
    width: 20%;
  }

  .ant-modal-body {
    padding: 8px 80px 40px 80px;
  }

  .wrap {
    padding-bottom: 10px;

    .patrolCondition {
      max-height: 300px;
      overflow-y: scroll;
    }
  }
}
</style>
